<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{app.css}">
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
<div class="app"></div>
<div>
    <h2 th:text="${user.getName()}"></h2>
    <p th:text="${user.name}"></p>
    <p th:text="${user.getAge()}"></p>
</div>
<!--创建临时变量 再次访问user中的属性就可以直接使用*{}的方式来取就不需要${user.xxx}的模式 使代码更优雅-->
<div th:object="${user}">
    <h1 th:text="*{vipUser}"></h1>
</div>

<!--th:if 表达式为真显示标签中的值-->
<p th:if="${user.isVipUser}">会员</p>
<p th:test="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}">

<!--th:each 用来迭代getTags-->
<ul>
    <li th:each="tag :${user.getTags()}" th:text="${tag}"></li>
</ul>

<ul>
    <li th:each="tag,star:${user.getTags()}" th:text="${tag}" th:classappend="${star.last}?active">

    </li>
</ul>


<!--th:switch -->
<div th:switch="${user.sex}">
    <p th:case="1">尼</p>
    <p th:case="2">女</p>
    <p th:case="*">默认</p>
</div>
<script th:inline="javascript">
    const user = /*[[${user}]] */{};
</script>
<!-- 三种组件引入方式 -->
<!-- th:replace com1 -->
<div th:replace="~{component::com1}"></div>
<!-- th:insert com1 -->
<div th:insert="~{component::com1}"></div>
<!-- id com2 -->
<div th:insert="~{component::#com2}"></div>

<!-- 组件之间的传值 -->
<div th:insert="~{component::com3('传递的数据')}"></div>
<div th:insert="~{component::com4(~{::#message})}">
    <p id="message">替换的模块</p>
</div>



</body>
</html>